<template>
	<view>

		<view class="orderform">
			<view class="ordercenter">
				<view class="ordercontent_box">
					<view class="ordercontent_lable">
						<view style="display: inline;color: #f77669;margin-right: 10rpx;">01</view>求助标题
					</view>
					<input type="text" v-model="title" placeholder="请输入" />
				</view>
				<view class="ordercontent_box">
					<view class="ordercontent_lable">
						<view style="display: inline;color: #f77669;margin-right: 10rpx;">02</view>姓名
					</view>
					<input type="text" v-model="linkUser" placeholder="请输入" />
				</view>
				<view class="ordercontent_box">
					<view class="ordercontent_lable">
						<view style="display: inline;color: #f77669;margin-right: 10rpx;">03</view>求助联系电话
					</view>
					<input type="number" v-model="phone" placeholder="请输入" maxlength="11"/>
				</view>
				<view class="ordercontent_box">
					<view class="ordercontent_lable" style="margin-bottom: 20rpx;">
						<view style="display: inline;color: #f77669;margin-right: 10rpx;">04</view>服务类型
					</view>
				
					<picker @change="bindPickerChange" :value="type" :range="array">
						<label class="uni-inputs">{{array[type]}}</label>
					</picker>

				</view>
				<view class="ordercontent_box">
					<view class="ordercontent_lable">
						<view style="display: inline;color: #f77669;margin-right: 10rpx;">06</view>所在街道
					</view>
					<!-- <picker @change="areaChange" @columnchange="areaColumnChange" class="picker" mode="multiSelector" :range="areaArray" rangeKey="title" :value="areaIndex" >
					    <label :class="'uni-inputs' + (selectedArea?'':' placeholder')">{{selectedArea?selectedArea:'请选择'}}</label>
					</picker> -->
					<picker @change="bindPickerChangess" :value="community" :range="arraylist">
						<label class="uni-inputs">{{arraylist[community]}}</label>
					</picker>
				</view>
				<view class="ordercontent_box">
					<view class="ordercontent_lable">
						<view style="display: inline;color: #f77669;margin-right: 10rpx;">07</view>服务地址
					</view>
					<input type="text" v-model="address" placeholder="请输入" />
				</view>
				<view class="ordercontent_box">
					<view class="ordercontent_lable">
						<view style="display: inline;color: #f77669;margin-right: 10rpx;">08</view>期望服务时间
					</view>
					<!-- <input type="number" v-model="time" placeholder="请输入"/> -->

					<uni-datetime-picker type="date" v-model="serviceTime"
						style="margin-left: 60rpx;height: 60rpx;margin-top: 30rpx;" />

				</view>
				<view class="ordercontent_box">
					<view class="ordercontent_lable">
						<view style="display: inline;color: #f77669;margin-right: 10rpx;">05</view>具体服务时段
					</view>

					<picker @change="bindPickerChanges" :value="serviceTimeDetail" :range="array1">
						<label  class="uni-inputs">{{array1[serviceTimeDetail]}}</label>
					</picker>
				</view>
				<view class="ordercontent_box">
					<view class="ordercontent_lable">
						<view style="display: inline;color: #f77669;margin-right: 10rpx;">09</view>服务说明
					</view>
					<input type="text" v-model="comment" placeholder="请输入" />
				</view>

			</view>
			<button type="default" @click="submit">确认提交</button>
		</view>
	</view>
</template>

<script>
	var t = require("../../utils/request.js"),
		config = require("../../utils/config.js").config,
		a = function(t) {
			return t && t.__esModule ? t : {
				default: t
			};
		}(require("../../utils/api.js")),
		e = require("../../utils/util.js"),
		i = a.default.recruitList,
		o = a.default.dictionaryCounty,
		app = getApp();
	import {
		dirService,
		gettypelist,
		orgList
	} from '../../api/order.js'
	export default {
		data() {
			return {
				allArea: [],
				comment: '',
				serviceTime: '',
				title: '',
				linkUser: '',
				phone: '',
				address: '',
				explain: '',
				time: '',
				community: '',
				serviceTimeDetail: '',
				type: 0,
				inex: 0,
				array: [],
				array1: ['上午', '下午', '晚上'],
				arraylist:[],
				index: 0,
				typelist: []
			};
		},

		components: {},
		props: {},
		onLoad: function(t) {
			this.areaRequest()
			this.gettypelist()
		},
		methods: {
			areaRequest: function () {
				let that=this
			orgList({"name": "", "pageSize": 1000 }).then(function (t) {
				console.log(t)
				
				 t.data.rows.forEach(element => that.arraylist.push(element.name));
				 that.allArea=t.data.rows
			  });
			},
			bindPickerChange: function(e) {
				this.type = e.target.value
				console.log(this.array)
			},
			bindPickerChanges: function(e) {
				this.serviceTimeDetail = e.target.value
			},
			bindPickerChangess: function(e) {
				this.community = e.target.value
			},
			gettypelist() {
				gettypelist().then((ret) => {
					if (ret.success) {
						ret.data.forEach(element => this.array.push(element.value));
						this.typelist=ret.data
					}
				})
			},
			submit() {
				if (this.linkUser == '') {
					uni.showToast({
						title: "联系人姓名不能为空",
						icon: "none"
					})
				} else if (this.phone == '') {
					uni.showToast({
						title: "联系方式不能为空",
						icon: "none"
					})
				} else if (this.address == '') {
					uni.showToast({
						title: "上门地址不能为空",
						icon: "none"
					})
				} else if (this.serviceTime == '') {
					uni.showToast({
						title: "请选择期望服务日期",
						icon: "none"
					})
				} else {
					let data = {
						"volunteerId": app.globalData.zyzId,

						"title": this.title,
						"linkUser": this.linkUser,
						"phone": this.phone,
						"address": this.address,
						"serviceTime": this.serviceTime, //服务时间
						"comment": this.comment, //说明
						"serviceTimeDetail": this.serviceTimeDetail + 1, //具体服务时段
						'serviceGroup':this.typelist[this.type].code,
						'orgId': this.allArea[this.community].id
					}
					dirService(data).then((result => {
						console.log(result)
						if (result.success) {
							uni.showToast({
								title: "申请成功",
								icon: "success",
								duration: 2000
							})
							 setTimeout(function(){
								 uni.navigateTo({
								 	url: "/pages/order/order",
								 
								 });
							 }, 1000); 
							
						} else {
							uni.showToast({
								title: result.message,
								icon: "none",
								duration: 2000
							})
						}
					}));
				}
			}

		}
	};
</script>
<style>
	@import '@/common/uni.css';

	.title {
		padding: 5px 13px;
	}


	.orderform {
		width: 100%;
		min-height: 100%;
		height: auto;
		background: #fafafa;
		padding: .4rem .266667rem;
	}
.uni-inputs{
	height: 40rpx;
	padding: 7rpx 0rpx;
	line-height: 20rpx;
	font-size: 28rpx;
	background: #FFF;
	-webkit-box-flex: 1;
	margin-left: 30px;
	width: 100%;
	-webkit-flex: 1;
	flex: 1;
	display: inline-flex;
	border-bottom: 1px solid #f4f4f4;
	/* padding-bottom: 20rpx; */
}
	.ordercenter {
		width: 100%;
		height: auto;
		background-color: #fff;
		border-radius: .266667rem;
		padding: 20rpx 30rpx;
	}

	.ordercontent_box {
		padding: 30rpx 30rpx;
		padding-bottom: 20rpx;
		font-size: 34rpx;
	}

	.ordercontent_box input {
		margin-left: 60rpx;
		height: 80rpx;
		border-bottom: 1rpx solid #f4f4f4;
		font-size: 28rpx;
	}

	.orderform button {
		width: 90%;
		height: 2.5rem;
		line-height: 2.5rem;
		border-radius: 30rpx;
		border: none;
		background: #f6685a;
		color: #fff;
		font-size: 1rem;
		margin-bottom: 50rpx;
	}

	.orderform .uni-input {
		margin-top: 15rpx;
		height: 30px;
		padding: 7px 12px;
		line-height: 20px;
		font-size: 14px;
		background: #FFF;
		-webkit-box-flex: 1;
		margin-left: 30px;
		-webkit-flex: 1;
		flex: 1;
		border-bottom: 1px solid #f4f4f4;
		padding-bottom: 30px;
	}
	.area {
	    width: 100%;
	    height: 100%;
	    color: #333;
	    text-align-last: left;
	    white-space: nowrap;
	  
	}
	
	.placeholder {
	    color: #999;
	}
</style>
